<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>预订会议室</title>

<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="./js/application/memberindex.js"></script>
<script type="text/javascript" src="./js/application/memberMeetingroomList.js?201805102"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript" src="./laydate/laydate.js"></script>
<style>
.leftMenuTitle{background:url("./images/lefttop.gif") no-repeat;background-size: 4px 22px;background-position: 1px 7px;padding-left: 12px;}
.leftMenuTitle span{border-bottom:0px;}
.noticelist li{margin-top:15px;border-bottom:1px solid #ccc;display:table;width: 100%;cursor: pointer;}
.listleft{width:272px;height:166px;position: relative;float: left;}
.listright{position: relative;float: left;margin-left:15px; width:600px;}
.listright h1{font-size:2rem;margin-bottom:30px}
.listright h2{color:#f90;position: absolute;top: 0;right: 0px;float: right;}
.listright p{color:#999;font-size:16px;line-height:20px;padding-left:14px;}
.xcontainer{margin: 10px auto;padding-left: 25px;}
#d_title{font-size:2.5rem; margin-bottom:50px;}
#d_price{position: relative;top: none;right: none;float: none;margin-bottom: 30px;}
#d_p1,#d_p2,#d_p3{line-height:28px;}
.w_border,.w_border2,.w_border3{border:1px solid;height:56px;line-height:24px;text-align:center;cursor: pointer;}
.w_border2{border-color:#f5f5f5;line-height:50px; }
.crb,.cre,.cr,.mcr{background:#f8bb4c;font-weight:bold;}
.nocr{background:#e6e6e6}
.crb:after {position: absolute;content: '开始';left: calc(50% - 11px);top: 20px;}
.cre:after {position: absolute;content: '结束';left: calc(50% - 11px);top: 20px;}
.ac{background:#e4e4e4}
.ac:after {border: 6px solid transparent;border-bottom: 6px solid #000;width: 0;height: 0;position: absolute;content: ' ';bottom: 0px;left: calc(50% - 6px);}
.infotop {line-height:30px;}
.infotop i{border: 1px solid #000;width:15px;height:15px;background:#e6e6e6;position: relative;padding-left: 15px;margin-right: 5px;}
.infotop i:first-child{background:#fff}
.infotop i:last-child{background:#f8bb4c}
.infotop2,.infotop2 h2,.infotop2 p{display: table;text-align: left;float:left;height:35px;line-height:35px;background:#f5f5f5;font-size: 1.5rem;}
.infotop2 p{font-size:1.2rem;color:#ccc;margin-left:5px;}
.selecttime{background: #666 url(./images/selecttime.png) no-repeat;color: #fff;background-position: 8px 18px;}
.selecttime input{width:0px;height:0px;}
.text_left{text-align:left}
.text_right{text-align:right}
.f2{font-size: 1.5rem;}

.img-circle{width:25px;height:25px;border-radius:25px;border:1px solid #e6e6e6;margin-right: 5px;}
.w_border3{padding:5px;margin:0px;text-align:left;border-color:#f5f5f5;}
.mlist{height:34px;word-break: break-all;overflow: hidden;text-align:center}
.btn-yuding{background:#000;color:#fff}
</style>
</head>
<body>
<div class="incList">	
    <div class="formbody" name="memberMeetingroomlist">
    	<div class="leftMenuTitle formtitle"><span id="infoTitle">预订会议室</span></div>
        
        <div id="usual1" class="usual">     
            <div id="tab2" class="tabson">    
                <div class="noticelist"><ul id="userTable"></ul></div>

                <div class="pagin">
                    <div class="message">共<i id="totalRow" class="blue">0</i>条记录，每页<i id="pageSize" class="blue">0&nbsp;</i>条记录，当前显示第&nbsp;<i id="currentPage" class="blue">1&nbsp;</i>页</div>
                    <ul class="paginList" ></ul>
                </div>
            </div>
        </div>   
    </div>
    <div class="formbody" name="viewInfo" style="display:none">
    	<div class="leftMenuTitle formtitle"><span id="infoTitle">会议室详情</span></div>   
         <div class="xcontainer">
         <div class="row" style="border-bottom:1px solid #000">  
            <div class="listleft" id="d_img" style="width:419px;height:303px;"></div>
    		<div class="listright" style="margin-left: 30px;width: calc(100% - 459px);"><h1 id="d_title"></h1><h2 id="d_price"></h2>
    			<p id="d_p1"></p><p id="d_p2"></p><p id="d_p3"></p>
    		</div>
        </div>   
 
		  <div class="row" style="margin-top:30px;" id="d_time_w">
		    <div class="col-sm-1 w_border ac" id="w1"></div>
		    <div class="col-sm-1" id="w2"></div>
		    <div class="col-sm-1" id="w3"></div>
		    <div class="col-sm-1" id="w4"></div>
		    <div class="col-sm-1" id="w5"></div>
		    <div class="col-sm-1 w_border selecttime" id="selecttime" >选择<br>日期<input type="text" id="dayTime"  /></div>

		    <div class="col-sm-6 w_border" style="font-size:16px;line-height:50px">填写预定信息</div>
		  </div>
		  <div class="row">
		    <div class="col-sm-6 w_border" style="height: 100%;" id="timeleft">
		    	<div class="row">
		    		<div class="col-sm-12 infotop"><i></i>可预定 <i></i>已预订 <i></i>已选择</div>
		    	</div>
		    	<div class="row">
		    		<div class="col-sm-12 infotop2"><h2>时间</h2></div>
		    	</div>
		    	<div class="row" id="d_time_d"></div>
		    	
			</div>
		    <div class="col-sm-6 w_border" style="height: 100%;padding: 20px;" id="orderright">
		    	<div class="row">
		    		<div class="col-sm-4 infotop text_right f2">预订时间：</div>
		    		<div class="col-sm-8 infotop text_left f2" id="y_time"></div>
		    	</div>
		    	<div class="row" style="margin-top: 20px;margin-bottom: 20px;">
		    		<div class="col-sm-4 infotop text_right f2">会议主题：</div>
		    		<div class="col-sm-8 infotop text_left f2"><input type="text" class="form-control" id="y_zhuti" placeholder="请输入会议主题"></div>
		    	</div>
		    	<div class="row">
		    		<div class="col-sm-4 infotop text_right f2">参会人员：</div>
		    		<div class="col-sm-8 infotop text_left f2">
		    		<button class="btn btn-primary btn-lg" data-toggle="modal" data-backdrop="static" data-target="#modalview">添加</button>
		    		</div>
		    	</div>
		    	<div class="row">
		    		<div class="col-sm-4 infotop text_right f2"></div>
		    		<div class="col-sm-8 infotop text_left f2" >
		    			<div class="row" id="y_member" style="height: 150px;border: 1px solid #666;margin-top: 20px;"></div>
		    		</div>
		    	</div>
		    	<div class="row" style="margin-top: 20px;margin-bottom: 20px;">
		    		<div class="col-sm-4 infotop text_right f2">订单金额：</div>
		    		<div class="col-sm-8 infotop text_left f2" id="y_price"></div>
		    	</div>
		    	<div class="row">
		    		<div class="col-sm-12 infotop f2"><button class="btn btn-default btn-lg btn-yuding" >确定预订</button></div>
		    	</div>
		    
		    
			</div>
		  </div>
		</div>


    </div>
    
</div>

<div class="modal fade" id="modalview" tabindex="-1" role="dialog" aria-labelledby="modalview" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">选择参会人员</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
            <div class="row" id="y_memberList" style="margin-left: 0;margin-right: 0;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">订单确认</h4>
            </div>
            <div class="modal-body">请仔细核对订单内容，该订单仅支持开始前2个小时退订，不支持更换！</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btnsave">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
$(function(){

	$("#modalview").on("hidden.bs.modal", function() {  
	    $(this).removeData("bs.modal");  
	});  
})
</script>	
</body>
</html>